<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title> <#-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<#include "/resource/resource-lte-css.html">
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
        <!-- header -->
        <#include "/admin/common/header.html">
        <!-- aside -->
        <#include "/admin/common/aside.html">
        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                    <i class="fa fa-folder"></i>栏目 <small>管理</small>
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <a href="#"> <i class="fa fa-dashboard"></i> Home
                        </a>
                    </li>
                    <li class="active">Dashboard</li>
                </ol>
            </section>

            <!-- Main content -->
            <section class="content">
                <!-- Main row -->
                <div class="row">
                    <section class="col-lg-12 ">
                        <div class="box box-info">
                            <div class="box-header with-border">
                                <button id="add" class="btn btn-primary" onclick="add(0, '${ctx}${adminPath}/sort/add');">
                                    <i class="fa fa-save"></i> 添加二级分类
                                </button>

                            </div>
                            <div class="box-body">
                                <table class="table tree">
                                    <!-- 递归生成树形表 -->
                                    <#include "/macro/category/sort/sort-list-table.html"> <@sTable sorts 0 />
                                </table>
                            </div>
                        </div>
                    </section>
                    <!-- /.Left col -->
                </div>
                <!-- /.row (main row) -->



                <div class="modal fade" id="addModal" role="dialog">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title"></h4>
                            </div>
                            <form id="mainForm">
                                <div class="modal-body">
                                    <input type="hidden" name="id" id="id">
                                    <input type="hidden" value="${(category.id)!}" name="categoryId">
                                    <div class="form-group">
                                        <label for="categoryId">所属栏目</label>
                                        <select class="selectpicker form-control" disabled="disabled">
                                            <option value="${(category.id)!}">${(category.name)!}</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="parentId">上级分类</label>
                                        <select class="selectpicker form-control" name="parentId" id="parentId">
                                            <option value="0">---请选择子分类---</option>
                                            <!-- 自定义指令 -->
                                            <#include "/macro/category/sort/sort-select.html"> <@sort sorts 0 1/>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">名称</label>
                                        <input type="text" name="name" class="form-control" id="name" placeholder="请输入栏目名称">
                                    </div>
                                    <div class="form-group">
                                        <label for="title">标题</label>
                                        <input type="text" name="title" class="form-control" id="title" placeholder="请输入标题">
                                    </div>
                                    <div class="form-group">
                                        <label for="keyword">关键词</label>
                                        <input type="text" name="keyword" class="form-control" id="keyword" placeholder="请输入关键词,多个关键词用,分割">
                                    </div>
                                    <div class="form-group">
                                        <label for="description">描述</label>
                                        <input type="text" name="description" class="form-control" id="description" placeholder="请输入栏目描述">
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="submit" class="btn btn-primary">提交</button>
                                </div>
                            </form>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                </div>
                <!-- /.modal -->
            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->

        <#include "/admin/common/footer.html">
    </div>
    <!-- ./wrapper -->

    <input type="hidden" id="submitUrl">
</body>
<#include "/resource/resource-lte-js.html">
<script type="text/javascript">
	$('.table').treegrid();

	function add(parentId, url) {
		$('#mainModal .modal-header .modal-title').empty().text('添加二级分类');
		// 清空form
		$('#mainForm')[0].reset();
		// 将所有select option设为可用
		$('#parentId').find('option:disabled').prop('disabled', false);
		$('#parentId').val(parentId);
		$('#parentId').selectpicker('refresh');

		$('#id').val('');
		$('#submitUrl').val(url);
		$("#addModal").modal('show');
	}

	function edit(id, url) {
		$('#mainModal .modal-header .modal-title').empty().text('修改二级分类');
		$('#submitUrl').val(url);
		$.ajax({
			url : '${ctx}${adminPath}/sort/get/' + id,
			dataType : 'json',
			type : 'GET',
			contentType : 'application/json;charset=utf-8',
			success : function(data) {
				if (data.success && data.data != null) {
					var sort = data.data;
					$('#id').val(sort.id);
					$('#parentId').val(sort.parentId);
					$('#parentId').find('option:disabled').prop('disabled', false);
					$("#parentId option[value=" + sort.id + "]").attr('disabled', 'disabled');
					// $('#parentId').prop('disabled', true);
					$('#parentId').selectpicker('refresh');

					$('#name').val(sort.name);
					$('#title').val(sort.title);
					$('#keyword').val(sort.keyword);
					$('#description').val(sort.description);
					return;
				} else {
					swal(data.title, data.msg, 'error');
				}
			},
			error : function(data) {
				swal('错误', '网络或者连接异常,请稍后再试.', 'error');
			}
		});
		$("#addModal").modal('show');
	};

	function del(id, url) {
		swal({
			title : "确认",
			text : "确定删除选中的项吗?",
			type : "warning",
			showCancelButton : true,
			cancelButtonText : '取消',
			confirmButtonColor : "#DD6B55",
			confirmButtonText : "删除",
			closeOnConfirm : false
		}, function() {
			$.ajax({
				url : url,
				dataType : "json",
				type : "DELETE",
				contentType : "application/json;charset=utf-8",
				success : function(data) {
					if (data.success) {
						swal(data.title, data.msg, "success");
						setTimeout(function() {
							window.location.reload();
						}, 3000);
						return;
					} else {
						swal(data.title, data.msg, 'error');
					}
				},
				error : function(data) {
					swal('错误', '网络或者连接异常,请稍后再试.', "error");
				}
			});
		});
	}

	$('#mainForm').validate({
		rules : {},
		messages : {},
		submitHandler : function(form) {
			// 不能用这个, 否则select会取不到值
			// var formJson = $('#mainForm').find('input').not('[value=""]').serializeJSON();
			var formJson = $('#mainForm').serializeJSON();
			var url = $('#submitUrl').val();
			// alert(JSON.stringify(formJson));
			$.ajax({
				url : url,
				dataType : 'json',
				data : JSON.stringify(formJson),
				type : 'POST',
				contentType : 'application/json;charset=utf-8',
				success : function(data) {
					if (data.success) {
						$('#mainModal').modal('hide');
						swal({
							title : data.title + '3秒后刷新该页面.',
							text : data.msg,
							type : "success"
						});
						setTimeout(function() {
							window.location.reload();
						}, 3000);
						return;
					} else {
						swal(data.title, JSON.stringify(data.data), 'error');
					}
				},
				error : function(data) {
					swal('错误', '网络或者连接异常,请稍后再试.', 'error');
				}
			});
		}
	});
</script>
</html>
